import { Component } from 'react';
import './work2.1.scss'
const data = [
    {
        label: '线上活动',
        name: '线上活动',
        checked: true
    },
    {
        label: '推广类',
        name: '推广类',
        checked: false
    },
    {
        label: '线下活动',
        name: '线下活动',
        checked: false
    },
    {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
    }
]
class Form extends Component{
    state = {
        title:"",
        city:1,
        mobile:"",
        sponsor:1,
        description:"",
        switch:false,
        arr:[],
        today:true
    }
    // 多选框
    setBox = (e,index) =>{
        if (e.target.type === 'checkbox') {
            data[index].checked = !data[index].checked
            let arr2 = []
            data.map(item=>{
                arr2.push(item.checked)
            })
            this.setState({
                arr:arr2
            })
         }
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]:value
        })
        //   console.log('checkbox', this.state)  
    }
    setTitle = (e) =>{
        // console.log(e.target.value);
        this.setState({
            title:e.target.value
        })
    }
    // city
    handleSelectCity = (e) =>{
        this.setState({
            city:e.target.value
        })
    }
    // iphone
    setPhone = (e) =>{
        this.setState({
            mobile:e.target.value
        })
    }
    // sponsor
    handleSponsor = (e) =>{
        this.setState({
            sponsor:e.target.value
        })
    }
    // 描述
    handleDescription = (e) =>{
        this.setState({
            description:e.target.value
        })
    }
    // 重置
    setReset=()=>{
        this.setState({
            title:"",
            city:1,
            mobile:"",
            sponsor:1,
            description:"",
        })
        data.map(item=>{
            item.checked = false
        }) 
    }
    // 
    submit = ()=>{
        console.log(
            this.state
        );
    }
    setSwitch = (e)=>{
        this.setState({
            switch:e
        })
    }
    render() {
    return (
        <>
        <div className='wrapper'> 
            <form className='form'>
                <label> 
                    <p>活动名称</p>
                    <input className='ipt' readOnly value={this.state.title} onChange={this.setTitle} type="text" placeholder='前端前景技术发展交流'/>
                </label>
                <label>
                    <p>城市</p>
                    <select value={this.state.city} className='select' onChange={this.handleSelectCity}>
                        <option value="1" className='height'>北京</option>
                        <option value="2" className='height'>上海</option>
                        <option value="3" className='height'>济南</option>
                    </select>
                </label>
                <label>
                    <p>报名电话</p>
                    <input className='ipt' value={this.state.mobile} onChange={this.setPhone} type="text" placeholder='输入手机号'/>
                </label>
                <label className='switch'>
                    <p className='p'>允许电话沟通</p>
                    <input type="checkbox" className="switch-button" id="switch-button" checked={this.state.switch}  value={this.state.switch} onChange={()=>this.setSwitch(!this.state.switch)}/>
                    <label className='lab' htmlFor="switch-button"></label>
                </label>
                <div className='checkbox'>
                    <p>活动类型</p>
                    {
                        data.map((item,key)=>{
                            return(
                                <div key={key} className='check'>
                                    <input type="checkbox" checked={item.checked} name={item.name} onChange={(e)=>this.setBox(e,key )} />
                                    <span>{item.label}</span>
                                </div>                            
                            )   
                        })
                    }               
                </div>
                <div className='radio'>
                    <p>活动赞助商</p>
                    <div><input type="radio" name="" value='1' checked={this.state.sponsor==='1'} onChange={this.handleSponsor} />淘宝</div>
                   <div> <input type="radio" value='2' checked={this.state.sponsor==='2'} onChange={this.handleSponsor} />京东</div>
                </div>
                <label>
                    <p>描述</p>
                    <textarea className='text' value={this.state.description} onChange={this.handleDescription} cols="34" rows="4"></textarea>
                </label>
                <div className='btns'>
                    <div className='sub btn' onClick={this.submit}>提交</div>
                    <div className='reset btn' onClick={this.setReset}>重置</div>
                </div>
            </form>  
        </div>
       </>
    )
}
}

export default Form